{% extends 'base.html' %}
{% block title %}学业预警{% endblock %}
{% block head %}
    <style>
        .tab-content{
          margin-top: 10px;
          color: #000;
        }
        .tab-content p{
            font-size: 15px;
        }
        .tab-content > .tab-pane{
        display: block;
        height: 0;
        overflow-y: hidden;
        }
        .tab-content > .active,.tab-pane > .active {
            height: auto;
        }
        ul.nav-tabs{
          border-radius: 6px;
        }
        ul.nav-tabs li a{
          color: #fff !important;
        }
        ul.nav-tabs li a:hover{
          color: #000 !important;
        }
        ul.nav-tabs li.active a{
          color: #000 !important;
        }
        .college_point{
          position: absolute;
          right:50px;
          padding:5px 15px;
          border-radius: 5px;
          z-index: 1000
        }
        .minzu_point{
          position: absolute;
          right:150px;
          padding:5px 15px;
          border-radius: 5px;
          z-index: 1000
        }
        .student_xuexi > div{
            margin-top:10px;
            font-size:15px;
        }
        .student_xuexi > p{
            margin-top:30px;
            /*font-size:15px;*/
        }
        .area_point{
          position: absolute;
          right:50px;
          z-index: 1000
        }
        .area_point > select{
          padding:5px 15px;
          border-radius: 5px;
        }
        .sidebar{
          font-size: 15px;
        }
    </style>
{% endblock %}
{% block body %}
    <section id="main-content">
          <section class="wrapper">
    		  <div class="row">
    				<div class="col-lg-12">
    					<ol class="breadcrumb">
    						<li><i class="fa fa-home"></i><a href="index.html">首页</a></li>
    						<li><i class="fa fa-bars"></i>学业预警</li>
    					</ol>
    				</div>
    		  </div>
              <!-- page start-->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="col-lg-12">
                                    <div class="card-box">
                                        <div id="stu_warning" style="width: 100%;height: 500px;"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="card-box">
                                        <div id="charts" style="width: 100%;height: 500px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              <!-- page end-->
          </section>
      </section>
    <!-- javascripts -->
    <script src="{{url_for('static', filename='js/jquery.js')}}"></script>
    <script src="{{url_for('static', filename='js/bootstrap.min.js')}}"></script>
    <!-- nice scroll -->
    <script src="{{url_for('static', filename='js/jquery.scrollTo.min.js')}}"></script>
    <script src="{{url_for('static', filename='js/jquery.nicescroll.js')}}" type="text/javascript"></script><!--custome script for all page-->
    <script src="{{url_for('static', filename='js/scripts.js')}}"></script>

    <script src="{{url_for('static', filename='js/echarts.js')}}"></script>
    <script>
    (function(){
        var stu_warning=echarts.init(document.getElementById("stu_warning"));
        option_warning = {
            title: {
                text: '学业预警学生学院分布',
                x:'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c}"
            },
{#            color:['#D87A80','#2EC7C9','#B6A2DE'],#}
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['理学院', '设计学院', '外国语学院', '信息与通信工程学院', '计算机科学与工程学院', '土木工程学院', '机电工程学院', '预科教育学院',
                      '生命科学学院', '经济管理学院', '文法学院', '建筑学院', '环境与资源学院', '物理与材料工程学院', '国际商学院']
            },
            series: [
                {
                    name:'预警（人）',
                    type:'pie',
                    radius: '60%',
                    itemStyle:{
                      emphasis:{
                          shadowBlur:10,
                          shadowOffsetX:0,
                          shadowColor:'rgba(0, 0, 0, 0.5)'
                      }
                    },
                    data:[
                        {value:123, name:'理学院'},
                        {value:223, name:'设计学院'},
                        {value:323, name:'外国语学院'},
                        {value:147, name:'信息与通信工程学院'},
                        {value:247, name:'计算机科学与工程学院'},
                        {value:347, name:'土木工程学院'},
                        {value:562, name:'机电工程学院'},
                        {value:526, name:'生命科学学院'},
                        {value:256, name:'经济管理学院'},
                        {value:222, name:'文法学院'},
                        {value:365, name:'建筑学院'},
                        {value:258, name:'环境与资源学院'},
                        {value:369, name:'物理与材料工程学院'},
                        {value:256, name:'国际商学院'}
                    ]
                }
            ]
        };
        stu_warning.setOption(option_warning);
    })();
    (function(){
        var myChart = echarts.init(document.getElementById('charts'));
        myChart.showLoading({
            text: '正在努力的读取数据中...',
        });
        // ajax getting data...............
        $.ajax({
            url: '/getData',
            type: 'post',
            dataType: 'json',
            success: function (e) {
                var p_y = [];
                $.each(e, function (i, result) {
                    var t = new Date(Date.parse(result.time.replace(/-/g, "/")))
                    var p = result.value;
                    p_y.push([t, p]);
                });
                // ajax callback
                myChart.hideLoading();
                var option = {
                    title: {
                        text: '时间轴折线图',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            var date = new Date(params.value[0]);
                            data = date.getFullYear() + '-'
                                + (date.getMonth() + 1) + '-'
                                + date.getDate() + ' '
                                + date.getHours() + ':'
                                + date.getMinutes() + ':'
                                + date.getSeconds();
                            return data + '<br/>'
                                + params.value[1] + 'kW';
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    dataZoom: {
                        show: true,
                        start: 0,
                        end: 100
                    },
                    grid: {
                        x: 50,
                        x2: 20
                    },
                    xAxis: [
                        {
                            type: 'time',
                            splitNumber: 10
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'test',
                            type: 'line',
                            showAllSymbol: true,
                            symbolSize: 2,
                            data: p_y
                        }
                    ]
                };
                myChart.setOption(option);
            }
        })
    })();
    </script>
{% endblock %}
